<template>
  <div>
    <div>
      <el-row :gutter="24" class="statistics">
        <el-col :span="24" class="record">
          <div class="grid-content bg-purple recText">
            <el-col :span="12" class="order">
              <div class="order-header">
                <h3>
                  日销售统计
                </h3>
                <div class="order-list">
                  <div>
                    <h3>{{ drsl }}</h3>
                    <p>当日销售量（个）</p>
                  </div>
                  <div>
                    <h3>{{ drxse }}</h3>
                    <p>当日销售量（元）</p>
                  </div>
                  <div>
                    <h3>{{ drfc }}</h3>
                    <p>当日分成（元）</p>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12" class="sell">
              <div class="sell-header">
                <h3>
                  月销售统计
                </h3>
                <div class="sell-list">
                  <div>
                    <h3>{{ sl }}</h3>
                    <p>当月销售量（个）</p>
                  </div>
                  <div>
                    <h3>{{ xse }}</h3>
                    <p>当月销售额（万元）</p>
                  </div>
                  <div>
                    <h3>{{ fc }}</h3>
                    <p>当月分成（元{{ fc }}）</p>
                  </div>
                </div>
              </div>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="xzq">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="合作商：">
          <el-select v-model="formInline.b" placeholder="请选择">
            <el-option
              v-for="item in arr"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期：">
          <div class="block">
            <el-date-picker
              v-model="formInline.a"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      笔数统计：{{ sl }}  个收入统计：{{ xsel }}  元分成统计：  {{ fcl }}  元
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="订单日期"
        width="180"
      />
      <el-table-column
        prop="ownerName"
        label="合作商"
        width="180"
      />
      <el-table-column
        prop="ratio"
        label="分成比例"
      >
        <template slot-scope="{ row }">{{ (row.ratio ) }}%</template>
      </el-table-column>
      <el-table-column
        prop="orderTotalMoney"
        label="收入（元）"
      >
        <template slot-scope="{ row }">+{{ (row.orderTotalMoney/100 ).toFixed(2) }}</template>
      </el-table-column>
      <el-table-column
        prop="orderCount"
        label="笔数"
      />
      <el-table-column
        prop="totalBill"
        label="分成金额（元）"
      >
        <template slot-scope="{ row }">+{{ (row.totalBill / 100).toFixed(2) }}</template>
      </el-table-column>
    </el-table>
    <el-row
      v-if="searchList.totalCount==='0'?false:true"
      type="flex"
      justify="end"
      align="middle"
      style="height: 60px"
      class="paging"
      hide-on-single-page
    >
      <el-pagination layout=" slot">
        <template>
          <span class="countSize">共{{ +detList.totalCount || +detList.totalCount }}条记录</span>
          <span
            class="countSize"
          >第{{ +detList.pageIndex || +detList.pageIndex }}/{{ +detList.totalPage || +detList.totalPage }}页</span>
        </template>
      </el-pagination>
      <el-pagination
        background
        layout="prev, next, total"
        prev-text="上一页"
        next-text="下一页"
        :current-page.sync="data.pageIndex"
        :page-size.sync="data.pageSize"
        @current-change="partnerCollectaa"
        @size-change="partnerCollectaa"
      />
    </el-row>
  </div>
</template>

<script>
import { orderReportInfol, orderAmountl, totalBill } from '@/api/user'
import { Partner, partnerCollect, report } from '@/api/duiz'
import dayjs from 'dayjs'
// import { log } from 'console'
export default {
  props: {
    searchList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      start: dayjs(dayjs()).startOf('month').format('YYYY-MM-DD'),
      starts: 0,
      end: dayjs().format('YYYY-MM-DD'),
      ends: 0,
      enda: 0,
      sl: '',
      drsl: '',
      drxse: '',
      xse: '',
      xsel: '',
      drfc: '',
      fc: '',
      fcl: '',
      arr: [],
      formInline: {},
      value: '',
      value1: '',
      tableData: [],
      detList: {},
      data: {
        pageIndex: 1,
        pageSize: 10,
        start: dayjs(dayjs()).startOf('month').format('YYYY-MM-DD'),
        end: dayjs().format('YYYY-MM-DD')
      }
    }
  },
  created() {
    this.getNowMonthfirst()
    this.Partner()
    this.partnerCollectaa()
  },
  methods: {
    getNowMonthfirst() {
      // 获取本月第一天时间 格式“yyyy-MM-dd HH:MM:SS”
      this.starts = this.start + '+00:00:00'
      // 获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”
      this.enda = this.end + '+00:00:00'
      var currentdates = this.end + '+23:59:59'
      this.ends = currentdates
      this.orderReportInfo()
    },
    async orderReportInfo() {
      const res = await orderReportInfol(this.starts, this.ends)
      const err = await orderReportInfol(this.enda, this.ends)
      const arr = await orderAmountl(this.enda, this.ends)
      const onj = await orderAmountl(this.starts, this.ends)
      const a = await totalBill(this.enda, this.ends)
      const v = await totalBill(this.starts, this.ends)
      this.drsl = err
      this.sl = res
      this.drxse = arr
      this.xse = (onj / 1000000).toFixed(2)
      this.fc = (v / 10000).toFixed(2)
      this.xsel = (onj / 100).toFixed(2)
      this.fcl = (v / 100).toFixed(2)
      this.drfc = a
    },
    async Partner() {
      const res = await Partner()
      this.arr = res.currentPageRecords
    },
    async  onSubmit() {
      const yy = this.formInline.a[1].getFullYear()
      const mm = this.formInline.a[1].getMonth() + 1 < 10 ? '0' + (this.formInline.a[1].getMonth() + 1) : this.formInline.a[1].getMonth()
      const dd = this.formInline.a[1].getDate() < 10 ? '0' + (this.formInline.a[1].getDate()) : this.formInline.a[1].getDate()
      const YY = this.formInline.a[0].getFullYear()
      const MM = this.formInline.a[0].getMonth() + 1 < 10 ? '0' + (this.formInline.a[0].getMonth() + 1) : this.formInline.a[0].getMonth()
      const DD = this.formInline.a[0].getDate() < 10 ? '0' + (this.formInline.a[0].getDate()) : this.formInline.a[0].getDate()
      const a = yy + '-' + mm + '-' + dd
      const b = YY + '-' + MM + '-' + DD
      const arr = {
        pageIndex: 1,
        pageSize: 10,
        partnerName: this.formInline.b,
        start: a,
        end: b
      }

      const res = await report(arr)
      this.tableData = res.currentPageRecords
      // this.partnerCollectaa()
    },
    async  partnerCollectaa() {
      const res = await partnerCollect(this.data)
      this.tableData = res.currentPageRecords
      console.log(res.currentPageRecords)
      this.detList = res
    }

  }
}
</script>

<style lang="scss" scoped>
// ul li {
//   list-style: none;
// }
.statistics {
//   height: 540px;
  .record {
    height: 100%;
    padding: 0 10px;

    .recText {
      width: 100%;
      height: 166px;
      display: flex;
      .order {
        height: 100%;
        background-color: #fff;
        padding: 0 10px;
        border-radius: 20px;
        background: #e9f3ff;
        background-image: url(https://likede2-admin.itheima.net/img/task.66b715b7.png);
        background-repeat: no-repeat, no-repeat;
        background-position: 470px 50px, calc(100% - 12px) 100%;
        .order-header {
          font-weight: 400;
          font-size: 14px;
          padding: 20px;
          span {
            font-size: 12px;
            padding-left: 10px;
            color: #999;
          }
        }
        .order-list {
          height: 110px;
          display: flex;
          align-items: center;
          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            h3 {
              font-size: 36px;
              color: #072074;
            }
            P {
              color: #91a7dc;
            }
          }
        }
      }
      .sell {
        height: 100%;
        margin: 0 10px;
        border-radius: 20px;
        background: #fbefe8
          url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
          calc(100% - 12px) 100%;
        .sell-header {
          font-weight: 400;
          font-size: 14px;
          padding: 20px;
          span {
            font-size: 12px;
            padding-left: 10px;
            color: #999;
          }
        }
        .sell-list {
          height: 110px;
          display: flex;
          align-items: center;
          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            h3 {
              font-size: 36px;
              color: #ff5757;
            }
            P {
              color: #de9690;
            }
          }
        }
      }
    }
    .recpic {
      width: 100%;
      height: 352px;
      background-color: #fff;
      margin-top: 20px;
      padding: 20px;
      border-radius: 20px;
      .header {
        width: 100%;
        height: 35px;
        line-height: 35px;
        display: flex;
        justify-content: space-between;
        .title {
          h3 {
            font-size: 16px;
            span {
              font-weight: 400;
              font-size: 12px;
              color: #999;
            }
          }
        }
        .btn {
          background-color: #f4f4f5;
          width: 130px;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
      .chart {
        width: 100%;
        height: 100%;
        .chartLeft {
          height: 100%;
          padding-left: 500px;
        }
        .chartRight {
          height: 100%;
        }
      }
    }
  }
  .ranking {
    height: 100%;
    padding: 0 10px;
    .list {
      background-color: #fff;
      border-radius: 20px;
      height: 540px;
      padding: 20px;
      h3 {
        font-size: 16px;
        span {
          font-weight: 400;
          font-size: 12px;
          color: #999;
        }
      }
      .shoping {
        height: 100%;
        width: 100%;
        font-size: 14px;
        li {
          width: 100%;
          padding: 15px 0;
          display: flex;
          justify-content: space-between;
          .rank {
            width: 21px;
            padding-left: 6px;
            height: 20px;
            background: url();
            color: #8e5900;
          }
          .rank1 {
            background: url();
          }
          .rank2 {
            background: url();
          }
          .rank3 {
            background: url();
          }
        }
      }
    }
  }
}
// .button {
//   width: 33%;
//   height: 30px;
//   border: 0;
//   border-radius: 5px;
//   margin: 20px 5px;
// }
// .active {
//   background-color: #fff;
//   border: #fff;
//   color: black;
//   font-weight: 700;
// }
// .cooperate {
//   height: 353px;
//   // background-color: #fff;
//   margin-top: 20px;
//   // padding: 20px;
// //   .cooperateList {
// //     height: 100%;
// //     padding: 0 10px;
// //     .label {
// //       border-radius: 10px;
// //       height: 100%;
// //       padding: 20px;
// //       background-color: #fff;
// //       .headerTop {
// //         display: flex;
// //         font-size: 14px;
// //         justify-content: space-between;
// //         span {
// //           display: block;
// //           height: 20px;
// //           width: 20px;
// //           text-align: center;
// //           color: #5f84ff;
// //           border: 1px solid #5f84ff;
// //           border-radius: 50%;
// //           .shenglue {
// //             color: #5f84ff;
// //           }
// //         }
// //       }
// //       .cootable {
// //         height: 100%;
// //         .tablecood {
// //           height: 100%;
// //         }
// //         .tablelist {
// //           height: 100%;
// //           display: flex;
// //           align-items: center;
// //           .collect {
// //             padding-left: 40px;
// //             height: 230px;
// //             width: 155px;
// //             background-color: #999;
// //             display: flex;
// //             flex-direction: column;
// //             justify-content: center;
// //             background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
// //               linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
// //               linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
// //               linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
// //             background-size: 50% 50%;
// //             background-repeat: no-repeat;
// //             h3 {
// //               margin-top: 20px;
// //               margin-bottom: 5px;
// //               font-size: 24px;
// //               color: #072074;
// //             }
// //           }
// //         }
// //       }
// //     }
// //   }
// //   .unusual {
// //     height: 100%;
// //     padding: 0 10px;
// //     .label {
// //       height: 100%;
// //       border-radius: 10px;
// //       padding: 20px;
// //       background-color: #fff;
// //       .headerTop {
// //         display: flex;
// //         font-size: 14px;
// //         justify-content: space-between;
// //         span {
// //           display: block;
// //           height: 20px;
// //           width: 20px;
// //           text-align: center;
// //           color: #5f84ff;
// //           border: 1px solid #5f84ff;
// //           border-radius: 50%;
// //           .shenglue {
// //             color: #5f84ff;
// //           }
// //         }
// //       }
// //       .empty {
// //         display: flex;
// //         flex-direction: column;
// //         align-items: center;
// //         padding-top: 20%;
// //       }
// //     }
// //   }
// }
</style>

